<template>
  <div>
    <el-table
      v-loading="loading"
      :data="list"
      style="width: 100%"
    >
      <el-table-column
        fixed
        type="index"
        label="序号"
        width="70"
        align="center"
      />
      <el-table-column
        prop="taskCode"
        label="工单编号"
        width="150"
        align="center"
      />
      <el-table-column
        prop="innerCode"
        label="设备编号"
        width="145"
        align="center"
      />
      <el-table-column
        prop="taskType.typeName"
        label="工单类型"
        width="140"
        align="center"
      />
      <el-table-column
        label="工单方式"
        width="140"
        align="center"
      >
        <template #default="scope">
          {{ createType[scope.row.createType]||'未知' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="taskStatusTypeEntity.statusName"
        label="工单状态"
        width="140"
        align="center"
      />
      <el-table-column
        prop="userName"
        label="运营人员"
        width="170"
        align="center"
      />
      <el-table-column
        label="创建日期"
        width="200"
      >
        <template #default="scope">
          {{ formatDate(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleClick(scope.row)">查看详情</el-button>
        <!-- <el-button type="text" size="small">编辑</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 实现分页
        current-page 当前页数
        page-size 每页显示个数
        total 总条目数
        current-change 页面改变时会触发
         -->
    <div class="block">
      <el-pagination
        :current-page.sync="pageOption.pageIndex"
        :page-size="pageOption.pagesize"
        layout="total, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 查看详情弹窗 -->
    <el-dialog
      title="工单详情"
      :visible.sync="ViewDetails"
      width="45%"
    >
      <!-- 提示信息 -->
      <div class="title">
        <el-alert
          title="取消"
          type="info"
          show-icon
        />
        <img src="http://likede2-admin.itheima.net/img/pic_3.e8208e34.png" alt="">
      </div>

      <el-descriptions :column="2">
        <el-descriptions-item label="设备编号">{{ taskData.taskCode }}</el-descriptions-item>
        <el-descriptions-item label="创建日期">
          {{ formatDate(taskData.createTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="取消日期">
          {{ formatDate(taskData.updateTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="运营人员">{{ taskData.userName }}</el-descriptions-item>
        <el-descriptions-item label="工单类型">{{ }}</el-descriptions-item>
        <el-descriptions-item label="补货数量"><span style="color:#5f84ff">补货详情</span></el-descriptions-item>
        <el-descriptions-item label="工单方式">{{ createType[taskData.createType]||'未知' }}</el-descriptions-item>
        <el-descriptions-item label="取消原因">不便透漏</el-descriptions-item>
      </el-descriptions>
      <!-- 底部按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button class="button" @click="newBuild(taskData)">重新创建</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getTaskApi, searchstateApi } from '@/api'
import dayjs from 'dayjs'
export default {
  props: {
    // list: {
    //   type: Array,
    //   default: () => []
    // }
    submitList: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      loading: false,
      ViewDetails: false,
      createType: {
        1: '手动',
        2: '自动'
      },
      list: [],
      taskData: {},
      // 搜索传入的数值
      pageOption: {
        pageIndex: 1,
        pagesize: 10,
        isRepair: false // 是否是维修工单
      },
      pageOptions: {},
      currentPage1: 4,
      total: 0
    }
  },
  computed: {
    // pageOptions() {
    //   return { ...this.pageOption, ...this.submit }
    // }
  },
  // 在页面初始化调用数据请求函数
  async created() {
    this.pageOptions = { ...this.pageOption, ...this.submit }
    this.getSearchstateApi()
    console.log(this.submitList)
    console.log(this.pageOptions)
  },
  methods: {
    // 封装工单搜索
    async getSearchstateApi() {
      const { data } = await searchstateApi(this.pageOption)
      console.log(data)
      this.list = data.currentPageRecords
      this.total = +data.totalCount
    },
    // 点击查看详情
    async handleClick(row) {
      this.ViewDetails = true
      console.log(row)
      const { data } = await getTaskApi(row.taskId)
      console.log(data)
      this.taskData = data
    },
    // 格式化时间
    formatDate(value) {
      return dayjs(value).format('YYYY-MM-DD hh:mm:ss')
    },
    // 注册重新创建工单按钮事件
    // 声明事件
    // 封装数据请求接口、引入、使用
    // 点击重新创建
    // 关闭查看详情页面
    // 使用父传子开启新建工单弹窗并实现数据回显
    newBuild(row) {
      this.ViewDetails = false
      console.log(row)
      this.$emit('newClick', row.taskId)
    },
    // 实现分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.loading = true
      this.getSearchstateApi()
      this.pageOption.pageIndex = val
      this.loading = false
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style lang="scss">
/* 提示文案 */
.title{
  // position: relative;
  margin-top: -20px;
  margin-bottom: 30px;
  color: #393939;
}
.title img{
  position: absolute;
  top: 53px;
  left: 433px;
}
.el-alert--info.is-light {
  color: #040404;
}
.el-alert{
  padding: 13px 16px;
}
// 内容
.el-descriptions{
  padding: 0px 0px 0px 30px;
}
/* 底部按钮 */
.el-dialog__footer {
    margin-top: -38px;
    padding: 15px;
}
.dialog-footer{
  margin-top: 10px;
}
.button{
  background-color: #fbf4f0;
  border: #f8fafd;
  color: #f97138;
}
// 分页器
.block{
  margin: 20px 0;
}
</style>
